<template>
  <div class="app">
    <h2>App组件：{{ info }}</h2>
    <!--将info对象传递给showInfo组件子组件修改父组件传递进去的props(不规范)-->
    <!--给showInfo组件绑定自定义事件，子组件通知父组件修改数据(规范)-->
    <showInfo :info="info" :readonlyInfo="readonlyInfo" @changeInfoName="changeInfoName"></showInfo>
  </div>
</template>

<script>
/*
readonly()：接受一个对象 (不论是reactive响应式还是普通的) 或是一个 ref响应式，返回一个原值的只读代理
详细信息：
  只读代理是深层的：对任何嵌套属性的访问都将是只读的。它的 ref 解包行为与 reactive() 相同，但解包得到的值是只读的。
  要避免深层级的转换行为，请使用 shallowReadonly() 作替代
* */
import showInfo from "@/components/showInfo.vue";
import {reactive, readonly} from "vue";

export default {
  name: 'App',
  setup(props, context) {
    //使用reactive函数创建的info对象
    const info = reactive({
      name: "陶品奇",
      age: 22,
      address: "衡阳"
    })

    // 使用readonly函数将reactive函数创建的对象进行包裹(只读)
    const readonlyInfo = readonly(info)
    const changeInfoName = (value) => {
      info.name = value
    }

    return {
      info,
      readonlyInfo,
      changeInfoName
    }
  },
  components: {
    showInfo,
  }
}
</script>

<style lang="less"></style>
